<template>
  <div>
    <!-- 标题 :offset="1" -->
      <a-row :gutter="16" class="cardArer_title">
        <a-col class="filexConter" :span="3"> 申请字段 </a-col>
        <a-col class="filexConter" :span="5"> 企业字段 </a-col>
        <a-col class="filexConter" :span="5"> 默认值 </a-col>
        <a-col class="filexConter" :span="7"> 配置信息 </a-col>
        <a-col class="filexConter" :span="4"> 操作 </a-col>
      </a-row>
      <!-- 拖拽排序区域 -->
      <div class="cardArer_draggable">
        <draggable
          style="width: 99%"
          :group="{ name: 'relationTable' }"
          v-model="subCurrentObj.fieldlist"
          v-bind="dragOptions"
          @start="drag = true"
          @end="
            drag = false
            btnShow = true
          "
        >
          <transition-group type="transition" :name="!drag ? 'flip-list' : null">
            <!-- 绑定字段 -->
            <a-row v-for="(fitem, m_index) in subCurrentObj.fieldlist" :key="fitem.t" :gutter="16" class="cardArer_field">
              <a-col class="filexConter" :span="3"> {{ fitem.t }} </a-col>
              <a-col class="filexConter" :span="5">
                <SearchField
                  @f_setField="s_setField"
                  :f_treeData="subCurrentObj.entfieldlist"
                  :index="m_index"
                  :value="fitem.b"
                  field="b"
                />
              </a-col>
              <a-col class="filexConter" :span="5">
                <a-input v-model="fitem.default" placeholder="请输入默认值" />
              </a-col>
              <a-col class="filexConter" :span="7">
                <!-- 显示配置标签 -->
                <a-tag v-show="fitem.isRequired" color="blue"> 必填 </a-tag>
                <a-tag v-if="fitem.isLabel" color="pink"> 小标题 </a-tag>
                <a-tag v-if="fitem.type == 'input'" color="green"> 文本 </a-tag>
                <a-tag v-else-if="fitem.type == 'number'" color="green"> 数字 </a-tag>
                <a-tag v-else-if="fitem.type == 'select'" color="green"> 枚举 </a-tag>
                <a-tag v-else-if="fitem.type == 'file'" color="green"> 文件 </a-tag>
                <a-tag v-else-if="fitem.type == 'date'" color="green"> 日期 </a-tag>
                <a-tag v-else-if="fitem.type == 'textarea'" color="green"> 文本域 </a-tag>
                <a-tag v-else-if="fitem.type == 'cascader'" color="green"> 地址级联 </a-tag>
                <a-tag v-else-if="fitem.type == 'tree'" color="green"> 下拉树 </a-tag>
                <a-tag v-if="fitem.isExpression" color="purple"> 响应式 </a-tag>
                <a-tag v-if="fitem.hidden"> 隐藏 </a-tag>
                <a-tag v-if="fitem.disable"> 禁用 </a-tag>
              </a-col>
              <a-col class="filexConter" :span="2">
                <a v-if="fitem.b" @click="handEdit(fitem, m_index)" href="javascript:void(0);">
                  <span v-if="fitem.isConfigur"> 已配置 </span>
                  <span v-else style="color: red"> 未配置 </span>
                </a>
              </a-col>
            </a-row>
          </transition-group>
        </draggable>
      </div>
      <!-- 字段配置 -->
      <SubFieldModal ref="fieldModelRef" @f_setFieldValue="s_setFieldValue" />
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { subCurrentObj } from '@/utils/formassembly/generaltree.js'
export default {
  data() {
    return {
       subCurrentObj: subCurrentObj,
       drag: false,
    }
  },
  created() {},
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost',
      }
    },
  },
  methods: {
    s_setFieldValue(body, index) {
      this.$set(this.subCurrentObj.fieldlist, index, body)
      this.subCurrentObj.fieldlist[index].isConfigur = true
    },
    // 从表关联字段回调
    s_setField(value, field, index) {
      this.$set(this.subCurrentObj.fieldlist[index], field, value)
    },
    // 属性配置弹窗
    handEdit(fitem, m_index) {
      let title = fitem.t
      for(let v of this.subCurrentObj.aplfieldlist) {
        if(v.value == fitem.t) {
          title = v.title
          break
        }
      }
      // console.log('fitem', fitem)
      this.$refs.fieldModelRef.f_init(title, fitem, m_index)
    },
  },
  components: {
    SearchField: () => import('@/views/businessAssembly/public/spareparts/searchField'),
    SubFieldModal: () => import('@/views/businessAssembly/generaltree/subtable/subFieldModal.vue'),
    draggable,
  },
}
</script>

<style lang="less" scoped>
.btnBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 50px;
}
.cardArer {
  // border: 1px solid red;
  &_title {
    background-color: rgb(247, 247, 247);
    font-weight: 800;
  }
  &_field {
    background-color: rgb(255, 250, 240);
    border-bottom: 1px solid rgb(238, 238, 238);
  }
  &_draggable {
    // border: 1px solid red;
    padding-left: 10px;
    max-height: 350px;
    overflow: auto;
  }
}
.filexConter {
  height: 50px;
  display: flex;
  align-items: center;
  // border: 1px solid blue;
}
</style>
